<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>社区讨论 - 海城区</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: #f5f5f5;
            min-height: 100vh;
        }
        
        /* 顶部导航栏 */
        .header {
            background: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .back-btn {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            margin-right: 15px;
            color: #333;
        }
        
        .header-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            flex: 1;
        }
        
        .publish-btn {
            background: #4a9eff;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
        }
        
        /* 内容区域 */
        .content {
            padding: 20px 0 80px 0;
        }
        
        /* 社区讨论样式 */
        .community-item {
            background: white;
            margin: 0 20px 15px;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        
        .community-item:hover {
            transform: translateY(-2px);
        }
        
        .community-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .community-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #4a9eff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            margin-right: 10px;
        }
        
        .community-user-info {
            flex: 1;
        }
        
        .community-username {
            font-size: 14px;
            font-weight: bold;
            color: #333;
        }
        
        .community-time {
            font-size: 12px;
            color: #999;
        }
        
        .community-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }
        
        .community-content {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        
        .community-image {
            width: 100%;
            max-height: 200px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 10px;
        }
        
        .community-stats {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 12px;
            color: #999;
        }
        
        .community-stat {
            display: flex;
            align-items: center;
            gap: 3px;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .community-stat:hover {
            color: #4a9eff;
        }
        
        /* 发布帖子表单 */
        .publish-form {
            background: white;
            margin: 0 20px 20px;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            display: none;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            display: block;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }
        
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            outline: none;
        }
        
        .form-input:focus {
            border-color: #4a9eff;
        }
        
        .form-textarea {
            width: 100%;
            min-height: 100px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            outline: none;
            resize: vertical;
            font-family: inherit;
        }
        
        .form-textarea:focus {
            border-color: #4a9eff;
        }
        
        .image-upload {
            position: relative;
            display: inline-block;
            background: #f5f5f5;
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.2s ease;
        }
        
        .image-upload:hover {
            border-color: #4a9eff;
        }
        
        .image-upload input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        
        .form-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        
        .btn-cancel {
            background: #f5f5f5;
            color: #666;
        }
        
        .btn-cancel:hover {
            background: #e0e0e0;
        }
        
        .btn-submit {
            background: #4a9eff;
            color: white;
        }
        
        .btn-submit:hover {
            background: #3a8eef;
        }
        
        /* 浮动发布按钮 */
        .float-publish-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: #4a9eff;
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(74, 158, 255, 0.3);
            z-index: 100;
            transition: transform 0.2s ease;
        }
        
        .float-publish-btn:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="header">
        <button class="back-btn" onclick="history.back()">‹</button>
        <div class="header-title">社区讨论</div>
        <button class="publish-btn" onclick="togglePublishForm()">发表</button>
    </div>
    
    <div class="content">
        <!-- 发布帖子表单 -->
        <div class="publish-form" id="publishForm">
            <form onsubmit="submitPost(event)">
                <div class="form-group">
                    <label class="form-label">讨论标题</label>
                    <input type="text" class="form-input" placeholder="请输入标题..." required>
                </div>
                <div class="form-group">
                    <label class="form-label">内容详情</label>
                    <textarea class="form-textarea" placeholder="分享你的想法和建议..." required></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">上传图片（可选）</label>
                    <div class="image-upload">
                        <input type="file" accept="image/*" onchange="previewImage(this)">
                        <div>📷 点击上传图片</div>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-cancel" onclick="togglePublishForm()">取消</button>
                    <button type="submit" class="btn btn-submit">发布</button>
                </div>
            </form>
        </div>
        
        <!-- 讨论列表 -->
        <div class="community-item">
            <div class="community-header">
                <div class="community-avatar">张</div>
                <div class="community-user-info">
                    <div class="community-username">张明</div>
                    <div class="community-time">2小时前</div>
                </div>
            </div>
            <div class="community-title">关于社区环境整治的建议</div>
            <div class="community-content">
                最近发现小区绿化带有些杂草丛生，建议增加维护频次。另外垃圾分类宣传还需要加强，很多居民对分类标准还不够清楚。我觉得可以组织一些宣传活动，让大家更好地了解垃圾分类的重要性和具体操作方法。
            </div>
            <img src="img/853b4aea-acb0-4bcf-b26b-ca285bdafe91.png" alt="讨论图片" class="community-image">
            <div class="community-stats">
                <div class="community-stat" onclick="toggleLike(this)">
                    <span>👍</span>
                    <span>12</span>
                </div>
                <div class="community-stat">
                    <span>💬</span>
                    <span>8</span>
                </div>
                <div class="community-stat">
                    <span>👁</span>
                    <span>45</span>
                </div>
            </div>
        </div>
        
        <div class="community-item">
            <div class="community-header">
                <div class="community-avatar" style="background: #4caf50;">李</div>
                <div class="community-user-info">
                    <div class="community-username">李华</div>
                    <div class="community-time">4小时前</div>
                </div>
            </div>
            <div class="community-title">社区活动建议：邻里互助活动</div>
            <div class="community-content">
                提议组织一次邻里互助活动，让大家互相认识，增进感情。可以包括技能分享、物品交换等内容。比如有人会修理电器，有人会烹饪，大家可以互相帮助。这样既能解决实际问题，也能增进邻里关系。大家觉得怎么样？
            </div>
            <div class="community-stats">
                <div class="community-stat" onclick="toggleLike(this)">
                    <span>👍</span>
                    <span>25</span>
                </div>
                <div class="community-stat">
                    <span>💬</span>
                    <span>15</span>
                </div>
                <div class="community-stat">
                    <span>👁</span>
                    <span>68</span>
                </div>
            </div>
        </div>
        
        <div class="community-item">
            <div class="community-header">
                <div class="community-avatar" style="background: #ff9800;">王</div>
                <div class="community-user-info">
                    <div class="community-username">王小明</div>
                    <div class="community-time">1天前</div>
                </div>
            </div>
            <div class="community-title">小区停车位管理建议</div>
            <div class="community-content">
                希望能够合理分配小区停车位，现在经常出现车位不够用的情况。建议实行车位预约制度，或者设置临时停车区域。
            </div>
            <img src="img/87ce05ef-cd7e-4d75-8bff-a44995bfca6a.png" alt="讨论图片" class="community-image">
            <div class="community-stats">
                <div class="community-stat" onclick="toggleLike(this)">
                    <span>👍</span>
                    <span>18</span>
                </div>
                <div class="community-stat">
                    <span>💬</span>
                    <span>12</span>
                </div>
                <div class="community-stat">
                    <span>👁</span>
                    <span>89</span>
                </div>
            </div>
        </div>
        
        <div class="community-item">
            <div class="community-header">
                <div class="community-avatar" style="background: #e91e63;">陈</div>
                <div class="community-user-info">
                    <div class="community-username">陈丽</div>
                    <div class="community-time">2天前</div>
                </div>
            </div>
            <div class="community-title">社区健身设施使用感受</div>
            <div class="community-content">
                感谢社区新增的健身设施，每天晨练都很方便。不过建议增加一些适合老年人的运动器材，让更多居民能够参与到健身活动中来。
            </div>
            <div class="community-stats">
                <div class="community-stat" onclick="toggleLike(this)">
                    <span>👍</span>
                    <span>31</span>
                </div>
                <div class="community-stat">
                    <span>💬</span>
                    <span>22</span>
                </div>
                <div class="community-stat">
                    <span>👁</span>
                    <span>156</span>
                </div>
            </div>
        </div>
        
        <div class="community-item">
            <div class="community-header">
                <div class="community-avatar" style="background: #9c27b0;">刘</div>
                <div class="community-user-info">
                    <div class="community-username">刘志强</div>
                    <div class="community-time">3天前</div>
                </div>
            </div>
            <div class="community-title">关于社区安全的一些想法</div>
            <div class="community-content">
                建议在小区入口增加更多的监控设备，并且加强门岗管理。最近听说有陌生人在小区内推销，希望能够加强管理，确保居民安全。
            </div>
            <img src="img/a3673c98-7a12-4e07-939d-6112c640e728.png" alt="讨论图片" class="community-image">
            <div class="community-stats">
                <div class="community-stat" onclick="toggleLike(this)">
                    <span>👍</span>
                    <span>42</span>
                </div>
                <div class="community-stat">
                    <span>💬</span>
                    <span>28</span>
                </div>
                <div class="community-stat">
                    <span>👁</span>
                    <span>203</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 浮动发布按钮 -->
    <button class="float-publish-btn" onclick="togglePublishForm()">✏️</button>
    
    <script>
        // 切换发布表单显示/隐藏
        function togglePublishForm() {
            const form = document.getElementById('publishForm');
            if (form.style.display === 'none' || !form.style.display) {
                form.style.display = 'block';
                form.scrollIntoView({ behavior: 'smooth' });
            } else {
                form.style.display = 'none';
            }
        }
        
        // 预览上传的图片
        function previewImage(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const uploadDiv = input.parentElement;
                    uploadDiv.innerHTML = `
                        <img src="${e.target.result}" style="max-width: 100%; max-height: 200px; border-radius: 8px;">
                        <div style="margin-top: 10px; font-size: 12px; color: #999;">点击更换图片</div>
                        <input type="file" accept="image/*" onchange="previewImage(this)" style="position: absolute; opacity: 0; pointer-events: none;">
                    `;
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
        
        // 提交帖子
        function submitPost(event) {
            event.preventDefault();
            alert('帖子发布成功！');
            togglePublishForm();
            // 这里可以添加实际的提交逻辑
        }
        
        // 点赞功能
        function toggleLike(element) {
            const countSpan = element.querySelector('span:last-child');
            let count = parseInt(countSpan.textContent);
            
            if (element.classList.contains('liked')) {
                count--;
                element.classList.remove('liked');
                element.style.color = '#999';
            } else {
                count++;
                element.classList.add('liked');
                element.style.color = '#4a9eff';
            }
            
            countSpan.textContent = count;
        }
    </script>
</body>
</html>